<!DOCTYPE html>
<html lang="en">
<?php
// 启动会话
session_start();
?>

<script>
    function userIsLoggedIn() {
        // 在这里实现用户登录状态的检查逻辑
        // 返回值为布尔值，true 表示用户已登录，false 表示用户未登录
        // 示例：检查用户是否具有有效的登录凭据
        // 这里改为检查会话中的登录状态
        return <?php echo isset($_SESSION['loggedin']) && $_SESSION['loggedin'] ? 'true' : 'false'; ?>;
    }

    // 在页面加载时检查用户登录状态
    window.addEventListener('DOMContentLoaded', function() {
        if (!userIsLoggedIn()) {
            window.location.href = '../Login.php'; // 请将 'login.html' 替换为您实际的登录页面路径
        }
    });
</script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <title>酒店后台留言管理</title>
    <link rel="stylesheet" href="../css/bootstrap.min441.css">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/jquery-ui.css">
    <link rel="stylesheet" href="../css/bootstrap-select.css">
</head>
</head>

<body>
    <div class="container">
        <!-- 预定管理 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">酒店后台管理系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item ">
                        <a class="nav-link" href="./预购订单管理.php">预订管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./房态查询页面.php">房态查询<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./房间状态管理.php">房态管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./后台房源管理页面.php">房源管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./客户管理页面.php">客户管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="./账户管理页面.php">账户管理<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="./留言后台查看界面.php">留言管理<span class="sr-only">(current)</span></a>
                    </li>


                    <li class="nav-item">
                        <a class="nav-link" href="../backend01.php">退回主页<span class="sr-only">(current)</span></a>
                    </li>

                </ul>
            </div>
        </nav>

        <div class="container mt-5">
            <h1>留言管理</h1>

            <div class="row">
                <div class="col-md-2">
                    <input type="text" class="form-control" id="nameSearch" placeholder="姓名">
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control" id="phoneSearch" placeholder="按电话号码搜索">
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control" id="checkInDate" placeholder="选择入住日期">
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control" id="checkOutDate" placeholder="选择离开日期">
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-3">
                    <input type="text" class="form-control" id="messageDate" placeholder="选择留言日期">
                </div>
                <div class="col-md-3">
                    <select class="form-control" id="remarkSearch">
                        <option value="">是否解决</option>
                        <option value="是">是</option>
                        <option value="否">否</option>
                    </select>
                </div>
            </div>

            <table class="table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>电话号码</th>
                        <th>邮件</th>
                        <th>房间类型</th>
                        <th>入住时间</th>
                        <th>离开时间</th>
                        <th>留言内容</th>
                        <th>留言时间</th>
                        <th>留言账号</th>
                        <th>备注（是否解决）</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                </tbody>
            </table>
        </div>

        <script src="../js/jquery-3.6.0.min.js"></script>
        <script src="../js/bootstrap.bundle.min.js"></script>
        <script src="../js/jquery-ui.js"></script>
        <script src="../js/bootstrap.bundle.min.js"></script>
        <link rel="stylesheet" href="../css/jquery-ui.css">
        <script>
            // //初始化日期选择器
            // 对退房日期的选择进行限制，确保用户只能选择入住日期后的日期作为退房日期
            $('#checkInDate, #checkOutDate, #messageDate').datepicker({
                dateFormat: 'yy-mm-dd',
                onSelect: function(selectedDate) {
                    if ($(this).attr('id') === 'checkInDate' || $(this).attr('id') === 'messageDate') {
                        var minDate = $(this).datepicker('getDate');
                        $('#checkOutDate, #messageDate').datepicker('option', 'minDate', minDate); // 退房日期至少等于入住日期或留言日期
                    }
                    if ($(this).attr('id') === 'checkInDate') {
                        var minCheckOutDate = new Date(selectedDate);
                        minCheckOutDate.setDate(minCheckOutDate.getDate() + 1); // 获得入住日期的后一天作为最小的退房日期
                        $('#checkOutDate').datepicker('option', 'minDate', minCheckOutDate);
                    }
                }
            });



            // 当条件发生变化时触发筛选
            $('#nameSearch, #phoneSearch, #checkInDate, #checkOutDate, #messageDate, #remarkSearch').on('input change', function() {
                filterMessages(); // 调用筛选函数进行筛选
            });



            // 定义筛选函数
            function filterMessages() {
                // 获取用户输入的条件
                var nameSearch = $('#nameSearch').val();
                var phoneSearch = $('#phoneSearch').val();
                var checkInDate = $('#checkInDate').val();
                var checkOutDate = $('#checkOutDate').val();
                var messageDate = $('#messageDate').val();
                var remarkSearch = $('#remarkSearch').val();

                // 遍历数据并根据条件筛选
                $('#tableBody tr').each(function(index, row) {
                    var guestbookId = $(row).find('td:nth-child(1)').text();
                    var name = $(row).find('td:nth-child(2)').text();
                    var phone = $(row).find('td:nth-child(3)').text();
                    var checkIn = $(row).find('td:nth-child(6)').text();
                    var checkOut = $(row).find('td:nth-child(7)').text();
                    var message = $(row).find('td:nth-child(8)').text();
                    var remark = $(row).find('td:nth-child(10)').text();

                    // 根据条件进行筛选
                    if ((nameSearch === '' || name.includes(nameSearch)) &&
                        (phoneSearch === '' || phone.includes(phoneSearch)) &&
                        (checkInDate === '' || checkIn === checkInDate) &&
                        (checkOutDate === '' || checkOut === checkOutDate) &&
                        (messageDate === '' || message === messageDate) &&
                        (remarkSearch === '' || remark === remarkSearch)) {
                        $(row).show(); // 显示符合条件的行
                    } else {
                        $(row).hide(); // 隐藏不符合条件的行
                    }
                });
            }

            // 在获取数据成功后，初始化列表显示
            $.ajax({
                url: '../backend/api/messageViewingInterface_1.php', // 发送GET请求给getData.php
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    var tableBody = $('#tableBody');
                    // 遍历数据并插入到表格中
                    $.each(data, function(index, row) {
                        var tr = $('<tr>');
                        tr.append('<td>' + row.guestbook_id + '</td>');
                        tr.append('<td>' + row.name + '</td>');
                        tr.append('<td>' + row.phone + '</td>');
                        tr.append('<td>' + row.email + '</td>');
                        tr.append('<td>' + row.roomType + '</td>');
                        tr.append('<td>' + row.checkInDate + '</td>');
                        tr.append('<td>' + row.checkOutDate + '</td>');
                        tr.append('<td>' + row.message + '</td>');
                        tr.append('<td>' + row.submitTime + '</td>');
                        tr.append('<td>' + row.account_phone + '</td>');
                        tr.append('<td>' + row.remark + '</td>');
                        var button = $('<button>').attr('type', 'button').addClass('btn btn-warning').text('解决').attr('id', 'resolve-button');
                        button.attr('data-guestbook-id', row.guestbook_id); // 存储guestbook_id到按钮的自定义属性中


                        // 定义remark状态变量，并设置初始状态为null
                        var remarkStatus = null;

                        button.on('click', function() {
                            var guestbookId = $(this).attr('data-guestbook-id'); // 获取存储在按钮中的guestbook_id
                            console.log('guestbookId: ' + guestbookId);

                            // 根据remark状态设置要更新的值
                            var remarkValue;
                            if (remarkStatus === '是') {
                                remarkValue = '否';
                            } else {
                                remarkValue = '是';
                            }

                            // 发送Ajax请求来更新数据库
                            $.ajax({
                                url: '../backend/api/messageViewingInterface_2.php',
                                type: 'POST',
                                data: {
                                    guestbookId: guestbookId,
                                    remark: remarkValue
                                }, // 使用remarkValue变量作为remark字段的值
                                success: function(response) {
                                    // 更新成功后，在页面上显示更新的结果
                                    if (remarkValue === '是') {
                                        console.log(`成功解决 id 为${guestbookId}的留言`);
                                    } else {
                                        console.log(`成功修改 id 为${guestbookId}的留言的状态为否`);
                                    }
                                    remarkStatus = remarkValue; // 更新remark状态为当前值
                                    // 或者，您可以使用其他方法来更新相关行的界面内容
                                    // 例如，您可以使用以下代码来更新当前行的界面内容
                                    $(`#remark_${guestbookId}`).text(remarkValue); // 更新当前行的remark字段
                                },
                                error: function(xhr, status, error) {
                                    console.log('更新remark字段失败:' + error);
                                }
                            });
                        });

                        tr.append($('<td>').append(button));
                        tableBody.append(tr);
                    });
                    filterMessages(); // 初始化列表显示时进行一次筛选
                }
            });
        </script>
</body>

</html>